// side content

body.caerp .main_area aside {
	.aside_tools {
		display: flex;
		list-style-type: none;
		margin: -10px;
		padding: var(--padding-m);
	}
}

body.caerp.aside_mini {
	.main_area aside .aside_tools {
		padding: var(--padding-m) var(--padding-s);
	}

	.main_area .aside_content {
		display: none;
	}
}

body.caerp:not(.aside_bottom) {
	.main_area .aside_tools {
		background: var(--screen-background-color);
		margin-bottom: var(--padding-m);
		position: sticky;
		top: -var(--padding-m);
	}
}

@media (min-width: $wideWidth ) {
	body.caerp:not(.aside_bottom) {
		.main_area aside {
			border-left: 1px dashed var(--border-trans-color);
			height: calc(100vh - 3.5rem);
			flex: 0 1 auto;
			overflow-x: hidden;
			overflow-y: auto;
			padding: var(--variable-vertical-padding-m);
			min-width: 9.375rem;
			max-width: 18.75rem;

			.aside_tools {
				justify-content: space-between;
			}
		}

		&.aside_mini {
			.main_area aside {
				min-width: 2rem;
				width: 2rem;
				overflow: hidden;

				.aside_tools {
					flex-wrap: wrap;

					.aside_size svg {
						transform: rotate(180deg);
					}
				}
			}
		}
	}

	body.caerp.aside_bottom {
		.main_area {
			overflow: auto;

			>main {
				overflow: visible;
			}

			aside {
				border-top: 1px dashed var(--border-trans-color);
				padding: var(--variable-vertical-padding-m) var(--variable-horizontal-padding-m);
				width: 100%;

				.aside_tools {
					justify-content: flex-end;

					.aside_size svg {
						transform: rotate(90deg);
					}

					.aside_position svg {
						transform: rotate(-90deg);
					}

					li {
						text-align: right;
						width: 2rem;
					}
				}
			}

			&.aside_mini {
				.main_area aside {
					height: 2rem;
					overflow: hidden;

					.aside_tools {
						.aside_size svg {
							transform: rotate(270deg);
						}
					}
				}
			}
		}
	}
}

@media (max-width: $wideWidth ) {
	body.caerp .main_area aside {
		border-top: 1px dashed var(--border-trans-color);
		padding: var(--variable-vertical-padding-m) var(--variable-horizontal-padding-m);
		width: 100%;

		.aside_tools {
			justify-content: flex-end;

			.aside_size svg {
				transform: rotate(90deg);
			}

			.aside_position {
				display: none;
			}
		}
	}

	body.caerp.aside_mini {
		.main_area aside {
			height: 2rem;
			overflow: hidden;
		}
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp .main_area aside {
		padding: var(--variable-vertical-padding-m) var(--variable-horizontal-padding-s);
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .main_area aside {
		max-width: 100%;
		padding: var(--variable-vertical-padding-m) var(--variable-horizontal-padding-xs);
	}
}